<template>
  <div class="slider-goods">
      <ul class="slider-goods-box" >
        <li :class="['slider-goods-item','slider-goods-item'+tplItemData.layoutstyles,'slider-item-length'+ length]" v-for="(goods,index) in tplItemData.goodslist" :key="index">
          <a class="goodsimg" href="javascript:;" @click="openLink(goods.link)">
            <img
              :src="goods.is_compress == 1 ?`${goods.pic}480x480`:goods.pic"
              alt
            />
            <!-- 已售罄 -->
            <b v-if="goods.is_sell_out == 1" class="sold-out">已售罄</b>
          </a>
          <div class="goods-info">
            <a  href="javascript:;" @click="openLink(goods.link)"
                class="title" 
                v-if="tplItemData.showName == 1 ||tplItemData.showName==true">     
                <span class="seckill" v-if="recoGoods">推荐</span>
                <span class="seckill" v-if="goods.is_self_support == 1">自营</span>
              {{goods.title}}
            </a>
            <div class="goods-tips">
              <span class="seckill" v-if="goods.is_miao && goods.is_miao==1">{{goods.actives_title}}</span>
              <span class="seckill" v-else-if="goods.is_bargin && goods.is_bargin == 1">砍价</span>
              <span class="seckill" v-else-if="goods.is_cycle && goods.is_cycle == 1 ">周期购</span>
              <span class="seckill" v-else-if="goods.is_crowd && goods.is_crowd == 1">{{goods.label}}</span>
              <span class="seckill" v-else-if="goods.is_group_shopping && goods.is_group_shopping == 1">团购</span>
              <span class="seckill" v-else-if="goods.discount && goods.discount !=10 && goods.rank_price ==null">
                <span v-if="goods.discount_sta==1">限时 ¥{{goods.discount}}</span>
                <span v-else>{{ goods.discount }}折</span>
              </span>
              <span class="seckill" v-else-if="goods.is_auction && goods.is_auction == 1">拍卖</span>
              <span class="seckill" v-else-if="goods.is_bmd==1">多买优惠</span>
              <span class="seckill greencol" v-if="goods.is_presale == 1">预售</span>
              <span class="seckill greencol" v-if="goods.is_time_purchase == 1">限时购</span>
            </div>
            <div class="goods-labels" v-if="goods.item_labels && goods.item_labels.length>0"><span>{{goods.item_labels}}</span></div>
            <!-- 样式A -->
            <p :class="['pic_box','pic_box'+tplItemData.layoutstyles]" v-if="tplItemData.showPrice && ( tplItemData.layoutstyles == 1)">
              <s class="original-price" v-if="displayOriginalPrice==1 && goods.original_price">&yen;{{goods.original_price}}</s>
            </p>
            <!-- 样式A,B -->
            <p :class="['pic_box','pic_box'+tplItemData.layoutstyles]" v-if="tplItemData.showPrice && ( tplItemData.layoutstyles == 1 || tplItemData.layoutstyles == 2)">
              <span class="goods-pirce" v-html="scaleGoodsPriceFn(goods.price)"></span>
              <span class="point" v-if="goods.buy_need_points !=0">
                  <i class="plus">+</i>
                  <i class="num">{{goods.buy_need_points}}</i>
                  <i class="name">{{tplItemData.point_name}}</i>
              </span>
            </p>
          </div>          
          <!-- 商品分组角标 -->
          <div class="pic-tips" v-if="itemPic">
            <img :src="itemPic" alt="">
          </div>

          <!-- 角标 -->
          <div class="corner-mark" v-if="tplItemData.cornerMark && tplItemData.cornerMark!=1">
            <img v-if="tplItemData.cornerMark==2" src="https://img.wifenxiao.com/h5-wfx/images/diy/goods/xinpin.png"/>
            <img v-if="tplItemData.cornerMark==3" src="https://img.wifenxiao.com/h5-wfx/images/diy/goods/remai.png"/>
            <img v-if="tplItemData.cornerMark==4" src="https://img.wifenxiao.com/h5-wfx/images/diy/goods/new.png"/>
            <img v-if="tplItemData.cornerMark==5" src="https://img.wifenxiao.com/h5-wfx/images/diy/goods/hot.png"/>
          </div>
        </li>
      </ul>
    <!-- </scroll> -->
  </div>
</template>

<script>
import Scroll from '@/components/scroll/index'
import { scaleGoodsPrice } from '@/utils/index'
import { mapGetters } from 'vuex'
import { openPage } from '@/utils/utils'
import Vue from 'vue'

export default Vue.extend({
  components: {
    Scroll
  },
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {}
      }
    },
    recoGoods: {
      type: Boolean,
      default: false
    },
    itemPic: {
      tpye: String,
      default: ''
    }
  },
  data() {
    return {
      length: 0
    }
  },
  created() {
    // console.log(this.tplItemData)
    this.length = this.tplItemData.goodslist.length
  },
  computed: {
    ...mapGetters(['displayOriginalPrice'])
  },
  methods: {
    openLink(link){
      openPage(link)
    },
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.slider-goods{
  overflow: hidden;
  white-space: nowrap;
  a{
    display: block;
  }
  // 图片样式
  .goodsimg{
    position: relative;
    padding-top: 100%;
    overflow: hidden;
    img{
      position: absolute;
      top: 0;
      width: 100%;
    } 
    .sold-out{
      position:absolute;
      top: 20px;
      left: -46px;
      width:180px;
      height:50px;
      line-height:50px;
      transform:rotate(-45deg);
      font-size:24px;
      text-align:center;
      color:#fff;
      background:#000;
      opacity: 0.5;
    }
  }
  // 商品信息
  .goods-info{
    position: relative;
    .title{  
      .seckill{
        display: inline-block;
        @include gradient(left,rgba(255,42,64,1),rgba(254,60,112,1));
        padding: 0 15px;
        margin-right: 6px 3px;
        font-size: 20px;
        border-radius: 17px;
        line-height: 34px;
        color: #fff;
      }
      @include lineClamp(26px,38px,1);
      display: block;
      &.multiLine{
        @include lineClamp(26px,38px,2);
        height: 76px;
        display: block;
      }
    }
    .pic_box{
      overflow: hidden;
      .original-price,.selled-num{
        color: #999999;
        font-size: 22px;
        margin-left: 20px;
      }
      .point{
        display: inline-block;
        border:1px solid #F20B22;
        margin-left: 6px;
        padding: 0 4px;
        border-radius: 4px;
        font-size: 20px;
        line-height: 30px;
        height: 30px;
        color: #F20B22;
      }
    }
  }
}
.slider-goods-box{
  white-space: nowrap;
  overflow:auto;
  .slider-goods-item{
    display: inline-block;
    background: #fff;
    .title{
      padding: 8px 0 6px;
    }
    &.slider-goods-item1 {
      width: 200px;
      margin: 0 6px 14px 8px;
      &.slider-item-length2{
      width: calc((750px - 28px)/ 2);
      }
      &.slider-item-length3{
        width: calc((750px - 42px)/ 3);
      }
      .title{
        color: #666;
      }
      .pic_box1{
        line-height: 40px;
        .original-price{
          margin-left: 0;
        }
      }
    }
    &.slider-goods-item2 {
      width: 248px;
      &.slider-item-length2{
      width: calc(750px / 2);
      }
      &.slider-item-length3{
        width: calc(750px / 3);
      }
      .title{
        color: #999;
      }
      .goods-info{
        .pic_box2{
          padding-bottom: 5px;
          text-align: center;
        }
      }
      
    }
  }
}
</style>